<template>
  <div class="containers">
    <div class="bodys">
      <img src="../../assets/christmas/Bg.png" alt="">
    </div>
    <!--转动的转盘部分-->
    <div class="turntable">
      <ul class="turnImg">
        <li v-for="(item,index) in ifOpenPrize.list" :key="index" class="slice" :style="'transform: rotate('+(360/ifOpenPrize.list.length/2-(360/ifOpenPrize.list.length)*index)+'deg) skewY('+(360/ifOpenPrize.list.length-90)+'deg);'">
        <div v-if="index%2==0" style="background:#fffbf0;width: 100%;height: 100%">
          <div :style="'transform:skewY('+(90-360/ifOpenPrize.list.length)+'deg) rotate('+360/ifOpenPrize.list.length/2+'deg);height: 100%;padding-top: 10vw;text-align:center;padding-top:19vw;margin-left: -4vw;'">
            <p>{{item.name}}</p>
            <img :src="item.image" alt="">

          </div>
        </div>
        <div v-else style="background:#fffbf0;width: 100%;height: 100%">
          <div :style="'transform:skewY('+(90-360/ifOpenPrize.list.length)+'deg) rotate('+360/ifOpenPrize.list.length/2+'deg);height: 100%;padding-top: 10vw;text-align:center;padding-top:19vw; margin-left: -4vw;'">
            <p>{{item.name}}</p>
            <img :src="item.image" alt="">

          </div>
        </div>


        </li>
      </ul>
    </div>
    <!--指针-->
    <div class="zhizhen" @click="rotate_handle()" >
      <img src="../../assets/christmas/zhen.png" alt="">
    </div>
    <!--抽奖次数-->
    <div class="getChance">{{ifOpenPrize.count}}次</div>
    <div align="center" style="position: relative;top: -96vw;left: 6vw;">
      <div class="prizeList">
        <div class="insideDiv">
          <div class="btn">
            <img src="../../assets/christmas/bangdan.png" alt="">
          </div>
          <ul class="infoList" v-if="winners.length>0">
            <li v-for="(v,i) in winners" :key="i">
              <p class="username">{{v.accept_name}}</p>
              <p class="prizename">{{v.name}}</p>
            </li>
          </ul>
          <div v-else>
            <div v-if="isNone" class="isNone">
              <img src="../../assets/christmas/priceNone.png" alt="">
              <p>暂无中奖记录~~~</p>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="prizeLists">
      <div class="bodyImg">
        <img src="../../assets/christmas/prizeList.png" alt="">
      </div>
      <img src="../../assets/christmas/left.png" alt="" class="leftImg">
      <img src="../../assets/christmas/right.png" alt="" class="rightImg">
    </div>
    <div class="getPrize">
      <img src="../../assets/christmas/getPrize.png" alt="">
    </div>
    <div class="popUp" v-if="isPopUp" @click="popNone">
      <div class="popUpBox">
        <img :src="priceImg" alt="">
      </div>

    </div>
  </div>


</template>

<script>
  import request from '../../request/index'
  export default {
    name: "turntable",
    data(){
      return{
        data:[],
        rotate_angle_pointer: 0,
        index:0,
        type:1,
        winners:[],
        ifOpenPrize:{
          count:0,
        },
        getPrizeInfo:[],
        start_rotating_degree: 0,
        rotate_angle: 0,
        start_rotating_degree_pointer: 0,
        rotate_angle_pointer: 0,
        rotate_transition: "transform 6s ease-in-out",
        rotate_transition_pointer: "transform 12s ease-in-out",
        click_flag: true, //是否可以旋转抽奖
        index: 0,
        isXuanzhuan:false,
        isPopUp:false,
        priceImg:'',
        isLoading:true,
        isNone:false,
        gift_id:'',
        rotateVal:0,
      }
    },
    mounted() {
      document.title='抽奖';
      $(function(){
        $('.item').each(function(index,item){
            $(item).css('transform','rotateZ('+ (index * 30) +'deg)');
        });
      });
    },
    created(){
      request.ifChrisOpenPrize(this);
    },
    destroyed () {
      clearInterval(this.timeRotating);
    },
    methods:{
      popNone(){
        this.isPopUp=false;
      },
      rotate_handle() {
        if(this.ifOpenPrize.count>0){
          if(this.isLoading){

            request.chouPrize(this);
            this.index = 1;
            this.isXuanzhuan=true;
            console.log()
            this.rotating(this.rotateVal);
          }
        }
      },

      rotating(rotateVal) {
        let roaDeg;
        if(this.ifOpenPrize.list.length>0){
          roaDeg=360/this.ifOpenPrize.list.length;
        }
        let price;
        
        this.timeRotating=setInterval(()=>{
          this.ifOpenPrize.list.forEach((v,i) => {
            if(v.id==this.gift_id){
              console.log(v.id)
              price=(i-1)*roaDeg;
              if(price>=0&&price<=360){
                price=price
              }else if(price>=360){
                price=price-360
              }else if(price<0){
                price=price+360;
              }
            }
          });
          console.log(price)
          var img = document.getElementsByClassName('turnImg')[0];
          this.rotateVal =this.rotateVal+15;
					img.style.transform = 'rotate(' + this.rotateVal + 'deg)';
          img.style.transition = '0.1s';
          if(!this.isXuanzhuan&&(this.rotateVal%360>=parseInt(price)-15&&this.rotateVal%360<=parseInt(price)+15)){
            clearInterval(this.timeRotating);
            setTimeout(()=>{
              this.isPopUp=true;
              this.isLoading=true;
              request.ifChrisOpenPrize(this);
            },500)
            
          }
        },10)
      },
    }
  }
</script>

<style scoped lang="scss">
.isNone{
 
  text-align: center;
  img{
    height: 100px;
    width: 145px;

  }
}
.slice {
	overflow: hidden;
	position: absolute;
	top: 0;
  right: 0;
	width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  color: #e89723;
  img{
    width: 28px;
    margin-top: 10px;
  }
}
@keyframes myAnimation {
    0%{
      transform: translate(0,-511px)
    }
    30%{
      transform: translate(0,0);
    }
    55%{
      transform: translate(0,0) rotate(-3deg);
      transform-origin:1% 2%;
    }
    75%{
      transform: translate(0,0) rotate(2deg);
      transform-origin:-1% -2%;
    }
    80%{
      transform: translate(0,0) rotate(-1deg);
      transform-origin:.5% 1%;
    }
    90%{
      transform: translate(0,0) rotate(1deg);
      transform-origin:.5% -1%;
    }
    95%{
      transform: translate(0,0) rotate(-.5deg);
      transform-origin:.5% -1%;
    }
    98%{
      transform: translate(0,0) rotate(.3deg);
      transform-origin:.5% -1%;
    }
    99%{
      transform: translate(0,0) rotate(-.1deg);
      transform-origin:.5% -1%;
    }
    100%{
      transform: translate(0,0);
    }
  }
.popUp{
  background:rgba(0,0,0,.5);
  height: 100vh;
  width:100vw;
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
  .popUpBox{
    top: -511px;
    animation: myAnimation 1.5s  forwards;
  }
  img{
    width: 275px;
    height: 511px;
  }

}
  .containers{
    background: url("../../assets/christmas/gz.png");
    overflow: hidden;
    width: 100vw;
    .getPrize{
      width: 87vw;
      height: auto;
      margin: 0px auto;
      margin-top: -28vw;
    }
    .prizeLists{
      width: 100vw;
      height: auto;
      margin: 0px auto;
      margin-top: -90vw;
      position: relative;
      top: -30vw;

      .bodyImg{
        width: 86vw;
        height: auto;
        margin: 0px auto;
        z-index: 1;
        position: relative;
      }
      .leftImg{
        position: absolute;
        top: 20vw;
        width:7vw;
        float: left;
        left: 3vw;
      }
      .rightImg{
        position: absolute;
        top: 20vw;
        width: 7vw;
        float: right;
        right: 3vw;
        transform: scale(1.3);
      }
    }
    .getChance{
      width: 12vw;
      height: 8vw;
      float: right;
      position: relative;
      top: -172vw;
      color: #960387;
      font-size: 19px;
      line-height: 8vw;
      text-align: center;
      right: 3vw;
    }
    .bodys{
      width: 100vw;
      height: auto;
      line-height: 0px;
    }
    .zhizhen{
      width: 13vw;
      height: auto;
      margin: 0px auto;
      position: relative;
      top: -132.7vw;
    }
    .turntable{
      width: 70vw;
      height: auto;
      margin: 0px auto;
      position: relative;
      top: -86.3vw;
      .turnImg{
        width: 70vw;
        height: 70vw;
        position: relative;
        overflow: hidden;
        border-radius: 1000px;
        color:#e89723;
      }
    }
  }
.prizeList{
  width: 86.4vw;
  height: 64.27vw;
  margin: 0px auto;
  background: #D93B3E;
  border: 2px solid #960387;
  border-radius: 2.67vw;
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  z-index: 1;
  .insideDiv{
    width: 82.67vw;
    height: 90%;
    margin: 0px auto;
    border-radius: 2.67vw;
    background: #FFFBE5;
    border: 2px solid #960387;
    max-height: 90%;
   /* animation: zhuan 3s alternate infinite forwards;;*/
    .infoList{
      width: 77.06vw;
      margin: 0px auto;
      overflow: scroll;
      max-height: 40vw;
      li{
        width: 100%;
        height: 8vw;
        font-size: 12px;
        color: #D93B3E;
        .username{
          float: left;
          line-height: 8vw;
          text-indent: 3vw;
        }
        .prizename{
          float: right;
          line-height: 8vw;
          margin-right: 3vw;
        }
      }
      li:nth-child(odd){
        background: #FFD1D2;
      }
      li:nth-child(even){
        background: #FFACAE;
      }
    }
    .btn{
      width: 25.33vw;
      height: 7.3vw;
      margin: 0 auto;
      margin-top: 1.3vw;
      margin-bottom: 3.3vw;
    }
  }
}
.footerTxt{
  font-size: 12px;
  color: #FF8C00;
  text-align: center;
  margin-top: 4vw;
}
@keyframes zhuan {

  25%{
    transform: rotate(180deg);
  }
  50%{
    transform: rotate(180deg);
  }
  75%{
     transform: rotate(180deg);
   }
  100%{
    transform: rotate(180deg);
  }
}
.shan{

  transform:skew(-30deg);   -webkit-transform: skew(30deg);   -moz-transform: skew(30deg);   -o-transform:skew(30deg);   -ms-transform:skew(30deg);
  height: 100px;
  width: 100px;
  border: 1px solid #960387;
}
</style>
